<template>
  <div v-if="!isEdit" class="mod-config">
    <div class="div-e" v-loading="loading">
      <div class="div-inquire">
        <div class="in-t">
          <div class="in-ts"></div>
          <h3>企业信息</h3>
        </div>
        <div class="in-t-button">
          <el-button v-if="canUpdate()" type="text" @click="showAlterComp">修改</el-button>
          <span v-if="canUpdate()">|</span>
          <el-button type="text" @click="clickGoBack">返回上级</el-button>
        </div>
      </div>
      <el-form title="">
        <el-row>
          <el-col :span="8">
            <el-form-item label="企业名称">{{detailData.name}}</el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="社会统一信用代码">{{detailData.certificateCode}}</el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="企业地址">{{detailData.addressDetail}}</el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="法人姓名">{{detailData.legalName}}</el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="法人联系方式">{{detailData.legalMobile}}</el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="所在地区">{{detailData.cityName}} {{detailData.areaName}}</el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="联系人">{{detailData.contactsName}}</el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系人电话">{{detailData.contactsMobile}}</el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="跟进人">{{detailData.followUserName}}</el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="职务">{{detailData.contactsPosition}}</el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="总进款(元)">
              <span>{{detailData.incomeCount}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="剩余未消耗(元)">
              <span :class="Number(detailData.unConsumeCount) !== 0 ? 'error-color' : ''">{{detailData.unConsumeCount}}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="成交记录">
              <el-checkbox v-model="detailData.lastYearDealFlag"  :true-label="1" :false-label="0" disabled>{{getThisYear-1}}年</el-checkbox>
              <el-checkbox v-model="detailData.thisYearDealFlag"  :true-label="1" :false-label="0"  disabled>{{getThisYear}}年</el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="安许编号">
              <span>{{detailData.securityLicenseCode}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="安许到期日期">
              <span>{{detailData.securityLicenseExpiryDate}}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="成交客户评级">
              <span>{{leverTransformer(detailData.ratingId, detailData.unNecessaryFlag)}}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
              <div style="white-space: pre-line;display: flex;align-items: flex-start">
                <span style="margin-right: 12px">
                  资质项
                </span>
                <span>
                  {{detailData.qualiListDetail}}
                </span>
              </div>
<!--            <el-form-item label="资质项" style="position: relative">
              <div style="white-space: pre-line;position: relative;top:-35px">
                {{detailData.qualiListDetail}}
              </div>
            </el-form-item>-->
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="备注">{{detailData.remark}}</el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="资质证明">
            <img style="width: 50px;height: 50px" v-for="img in detailData.qualiImageList" :src="img">
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="安许证明">
            <img style="width: 50px;height: 50px"  :src="detailData.securityLicenseImageUrl">
          </el-form-item>
        </el-row>
      </el-form>
    </div>
    <div class="div-e">
      <div class="div-inquire">
        <div class="in-t">
          <div class="in-ts"></div>
          <h3>其他信息</h3>
        </div>
      </div>
      <div class="div-tabs">
        <el-tabs v-model="activeName" @tab-click="">
          <el-tab-pane label="跟进日志"  name="first">
          <enteprise-details-follow-up v-if="activeName === 'first'" :id="id"></enteprise-details-follow-up>
          </el-tab-pane>
          <el-tab-pane label="报考资料"  name="second">
          <enteprise-details-apply v-if="activeName === 'second'" :id="id"></enteprise-details-apply>
          </el-tab-pane>
          <el-tab-pane label="合作记录"   name="third">
            <enteprise-details-cooperation v-if="activeName === 'third'" :id="id"></enteprise-details-cooperation>
          </el-tab-pane>
          <el-tab-pane label="流转记录"  name="fourth">
            <enteprise-details-turnover v-if="activeName === 'fourth'" :id="id"></enteprise-details-turnover>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
  <enteprise-add-or-update v-else :isAdd="false" :id="id"></enteprise-add-or-update>
</template>

<script>
import EntepriseDetailsFollowUp from './enteprise-details-follow-up'
import EntepriseDetailsApply from './enteprise-details-apply'
import EntepriseDetailsCooperation from './enteprise-details-cooperation'
import EntepriseDetailsTurnover from './enteprise-details-turnover'
import EntepriseAddOrUpdate from './enteprise-add-or-update'
import {getUserInfo} from '../../../../api/sys'
import {getDetail} from '../../../../api/customer/customerDetail'
import {leverTransformer} from '../../../../utils'
export default {
  name: 'details',
  components: {
    EntepriseAddOrUpdate,
    EntepriseDetailsTurnover,
    EntepriseDetailsCooperation,
    EntepriseDetailsApply,
    EntepriseDetailsFollowUp},
  props: {
    id: {
      type: Number,
      default: null
    },
    isAdd: {
      type: Boolean,
      default: true
    }
  },
  created () {
    this.getDetail()
    this.getUserInfoReq()
  },
  data () {
    return {
      loading: false,
      isEdit: false,
      activeName: 'first',
      detailData: {},
      userInfo: {}
    }
  },
  methods: {
    clickGoBack () {
      this.$parent.changeComponent('enterprise')
      this.getDetail()
    },
    showAlterComp () {
      this.isEdit = true
    },
    changeIsEditState (state) {
      this.isEdit = state
      this.getDetail()
    },
    // 资质列表转换成字符串函数
    transformQualiList (data) {
      if (data.qualiList) {
        data.qualiListStr = data.qualiList.map(item => item.name).join(';')
      } else {
        data.qualiListStr = ''
      }
    },
    getDetail () {
      if (this.id) {
        this.loading = true
        getDetail(this.id,
          (data) => {
            this.transformQualiList(data.data)
            this.detailData = data.data
            this.loading = false
          }, () => {
            this.loading = false
          })
      }
    },
    getUserInfoReq () {
      getUserInfo(({user}) => {
        this.userInfo = user
      })
    },
    canUpdate () {
      const userId = this.userInfo.id
      const followUserId = this.detailData.followUserId
      if (userId && followUserId) {
        return userId === followUserId
      }
    },
    leverTransformer (leverId, isEmark) {
      return leverTransformer(leverId, isEmark)
    }
  },
  computed: {
    getThisYear () {
      return new Date().getFullYear()
    }
  }
}
</script>

<style lang="less" scoped>
.mod-config {
  padding: 15px !important;
  background-color: #F5F7FA !important;
}

.div-e {
  width: 100%;
  background-color: #FFFFFF;
  padding: 15px;

}

.in-ts {
  width: 5px;
  height: 18px;
  float: left;
  margin-right: 8px;
  background: #6E92E9;
}

.in-t {
  width: 50%;
  float: left;
  height: 45px;
  display: flex;
  align-items: center;
  // margin-top: 15px;
  h3 {
    float: left;
    font-size: 16px;
    margin: 0px !important;
    padding: 0px !important;
    color: #000000;
  }
}

.div-inquire {
  width: 100%;
  height: 45px !important;
  background-color: #ffffff;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;

}

.el-form-item {
  margin-bottom: 0px !important;
}

.error-color{
  color: red;
}
</style>
